<template>
  <div class="playback flex">
    <div class="left-navbar">
      <el-menu
        default-active="1-1"
        class="el-menu-vertical-demo"
        background-color="#2C2D3A"
        text-color="#fff"
        active-text-color="#409EFF"
      >
        <el-submenu index="1">
          <template slot="title">
            <span>2021-5-24</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">Video1</el-menu-item>
            <el-menu-item index="1-2">Video2</el-menu-item>
            <el-menu-item index="1-3">Video3</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="img-list flex column evenly">
      <div
        :class="['img', currentIndex === index ? 'active' : '']"
        v-for="(item, index) in imgList"
        :key="index"
        @click="changeVideo(index)"
      >
        <p>{{ item.title }}</p>
        <img :src="item.imgUrl" />
      </div>
    </div>
    <div class="video">
      <video controls width="100%" height="100%" v-show="currentIndex === 0">
        <source src="@/assets/video/1.mp4" />
      </video>
      <video controls width="100%" height="100%" v-show="currentIndex === 1">
        <source src="@/assets/video/4.mp4" />
      </video>
      <video controls width="100%" height="100%" v-show="currentIndex === 2">
        <source src="@/assets/video/2.mp4" />
      </video>
      <video controls width="100%" height="100%" v-show="currentIndex === 3">
        <source src="@/assets/video/3.mp4" />
      </video>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      imgList: [
        {
          title: 'Camera',
          imgUrl: require('@/assets/img1.jpg')
        },
        {
          title: 'Thermal',
          imgUrl: require('@/assets/img2.jpg')
        },
        {
          title: '2D laser',
          imgUrl: require('@/assets/img3.jpg')
        },
        {
          title: '3D laser',
          imgUrl: require('@/assets/img4.jpg')
        }
      ]
    }
  },
  methods: {
    changeVideo(index) {
      this.currentIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
.playback {
  overflow-y: hidden;
  .left-navbar {
    .el-menu {
      width: 200px;
      height: calc(100vh - 94px);
    }
  }
  // .el-scrollbar {
  //   background: #000;
  //   width: 15%;
  // }
  .img-list {
    width: 12%;
    height: calc(100vh - 94px);
    background: #000;
    // width: 350px;
    padding: 0 10px;
    .img {
      height: 24%;
      cursor: pointer;
      // padding: 10px 0;
      p {
        color: #fff;
        background: #2c2d3a;
        margin: 0;
        padding: 10px;
      }
      img {
        width: 100%;
      }
      &.active {
        p {
          background: #288eff;
        }
        img {
          border: 1px solid #288eff;
          box-sizing: border-box;
        }
      }
    }
  }
  .video {
    flex: 1;
    background: #000;
    height: calc(100vh - 94px);
  }
}
</style>
